<template>
	<!-- 特权活动商品详情页 -->
	<view class="welfare-details">
		<view class="welfare-details-price">
			<view style="position: relative;width: 100%;height: 422upx;" @click="toSharePoster">
				<image :src="info.img_src" style="width: 100%;height: 423upx;" mode="aspectFill"></image>
				<view class="share-gain" v-if="info.share_money>0&&!isIos">
					分享赚{{info.share_money}}
				</view>
			</view>
			<view class="price-count-down" v-if="!isIos">
				<!-- 商品价格 -->
				<view class="current-price">
					<text style="font-size: 30upx;line-height: 42upx;">￥<text style="font-size: 60upx;line-height: 84upx;">{{info.price}}</text></text>
					<text>￥{{info.original_price}}</text>
				</view>
				<!-- 限时倒计时 -->
				<view class="time-limit">
					<view style="display: flex;">
						<image :src="time_limit_icon" mode="aspectFill" style="width: 32upx;height: 32upx;margin-right: 10upx;"></image>
						<text style="color: #FD3721;line-height: 34upx;">限时限量</text>
					</view>
					<view v-if="isTimeEnd">活动已结束</view>
					<view v-else>
						<text>{{days}}</text>天<text>{{hours}}</text>:<text>{{minutes}}</text>:<text>{{seconds}}</text>
					</view>
				</view>
			</view>
			<view class="detatil_bottom">
				<view class="child3">
					{{info.title}}
				</view>
				<view class="child4" style="display: flex;justify-content: space-between;">
					<view class="share-achievement" style="display: flex;">
						<view v-if="info.share_money>0&&!isIos">
							分享赚￥{{info.share_money}}
						</view>
						<view v-if="info.share_achievement_value>0">
							成就值+{{info.share_achievement_value}}
						</view>
					</view>
					<view class="join-num">
						<text style="color:#FF5C46;display: inline-block;">{{info.number}}人</text>已参加
					</view>
				</view>
			</view>
		</view>
		<view class="join-condition">
			<view style="display: flex;">
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 8upx;"></view>
				<view style="margin-left: 14upx">
					参与条件
				</view>
			</view>
			<view>
				{{info.condition}}
			</view>
		</view>
		<view class="privilege-details">
			<view style="display: flex;">
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 6upx;"></view>
				<view style="margin-left: 14upx">
					特权详情页
				</view>
			</view>
			<view class="rich_text_module">
				<u-parse :content="info.privilege_detail"></u-parse>
			</view>
		</view>
		<view class="space_bgc"></view>
		<view class="service-share">
			<view>
				<text>剩余名额<text style="color: #FF5C46;">{{info.remain_place}}</text>个</text>
				<text style="color: #999999;font-size: 26upx;" v-if="info.is_buy==1">（我已购买）</text><!-- 是否购买 1:已参加  2:未参加 -->
			</view>
			<view style="display: flex;align-items: center;">
				<!-- #ifdef MP-WEIXIN -->
				<view class="service" @click="toService">
					<button open-type="contact" style="width: 64upx;height: 64upx;" :style="{'background-size':'100% 100%',backgroundImage:'url('+service_icon+')'}" class="act_button_text" catchtap="" :session-from="info.session_from" show-message-card="true" send-message-title="咨询课程" ></button>
					<!-- <image v-if="!isIos" :src="service_icon" mode="" style="width: 64upx;height: 64upx;"></image> -->
					<text>客服</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="service" @click="preImg(info.activity_code)">
					<button open-type="contact" style="width: 64upx;height: 64upx;" :style="{'background-size':'100% 100%',backgroundImage:'url('+service_icon+')'}" class="act_button_text" catchtap="" :session-from="info.session_from" ></button>
					<!-- <image v-if="!isIos" :src="service_icon" mode="" style="width: 64upx;height: 64upx;"></image> -->
					<text>客服</text>
				</view>
				<!-- #endif -->
				<view class="service-share-gain" @click="toSharePoster">
					<view :class="(info.discounted_price>0||info.get_achievement_value>0)&&info.share_money<=0&&info.share_achievement_value<=0?'marginBo':''">
						分享给好友
					</view>
					<text><text v-if="info.share_money>0&&!isIos">赚￥{{info.share_money}}元</text><text style="margin-left:10upx;" v-if="info.share_achievement_value>0">+{{info.share_achievement_value}}成就值</text></text>
				</view>
				<view class="attend-self" v-if="info.is_buy == 2">
					
					<!--#ifdef MP-WEIXIN-->
					<!-- 授权登录 -->
					<button :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''" v-if="!token" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="isLogin">
						{{info.price==0?"免费领取":"自己参加"}}
					</button>
					<!-- 苹果端 -->
					<button :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''" v-else-if="isIos&&info.price>0" open-type="contact" :session-from="info.session_from" show-message-card="true" send-message-title="咨询课程">
						联系客服
					</button>
					
					<!-- 授权手机号 -->
					<button :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''" v-else-if="(info.price==0||!isIos)&&token&&!phone&&is_phone==0" open-type="getPhoneNumber" @getphonenumber="getphonenumber">
						{{info.price==0?"免费领取":"自己参加"}}
					</button>
					<button :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''" v-else-if="(info.price==0||!isIos)&&token&&(phone||is_phone==1)" @click="joinAct">
						{{info.price==0?"免费领取":"自己参加"}}
					</button>
					<text><text v-if="info.discounted_price>0">省￥{{info.discounted_price}}元</text><text style="margin-left:10upx;" v-if="info.get_achievement_value>0">+{{info.get_achievement_value}}成就值</text></text>
					<!--#endif-->
					<!--#ifdef H5-->
					<!-- 授权登录 -->
					<button :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''" v-if="!token" @click="isLogin">
						{{info.price==0?"免费领取":"自己参加"}}
					</button>
					<button :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''" v-else-if="token" @click="joinAct">
						{{info.price==0?"免费领取":"自己参加"}}
					</button>
					<text><text v-if="info.discounted_price>0">省￥{{info.discounted_price}}元</text><text style="margin-left:10upx;" v-if="info.get_achievement_value>0">+{{info.get_achievement_value}}成就值</text></text>
					<!--#endif-->
				</view>
				<view class="attend-self" v-if="info.is_buy == 1" @click="toBuySuccess">
					<view :class="(info.discounted_price<=0&&info.get_achievement_value<=0)&&(info.share_money>0||info.share_achievement_value>0)?'marginBo':''">
						查看我的订单
					</view>
					<text><text v-if="info.discounted_price>0">省￥{{info.discounted_price}}元</text><text style="margin-left:10upx;" v-if="info.get_achievement_value>0">+{{info.get_achievement_value}}成就值</text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/un-parse/u-parse.vue'
	//#ifdef H5
	import {
		userLogin
	} from '@/common/h5login.js'
	//#endif
	
	//#ifdef MP-WEIXIN
	import {
		userLogin
	} from '@/common/login.js'
	//#endif
	export default{
		components: {
			uParse
		},
		data(){
			return {
				time_limit_icon: this.$imgUrl+'img/privilege/time_limit_icon.png',
				service_icon: this.$imgUrl+'img/privilege/service_icon.png',
				info:{
					img_src: '',
					share_achievement_value: 0,
					price: 0,
					original_price: 0,
					discounted_price: 0,
					title: '',
					number: 0,
					condition: '',
					remain_place: 0,
					privilege_detail: '',
					share_money: 0,
					is_buy: 2,
                    is_address:null
				},
				id: 0,
				token: this.$store.getters.getToken,
				userId: this.$store.getters.getUserId,
				phone: this.$store.getters.getPhone,
				is_phone: 0,//0需要电话号码，1不需要
				timeId: null,
				isTimeEnd: false,
				days:'00',
				hours: '00',
				minutes: '00',
				seconds: '00',
				loginCode: '',
				share_id: this.$store.getters.getShareId,
				fromJin: this.$store.getters.getFormJin,
				templateIds: [],
				// 需要订阅的消息id
				needTemp: [],
				isIos:this.$isIos
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.share_id != undefined) {
				this.share_id = options.share_id
				this.fromJin = options.fromJin
				this.$store.commit('updataFromJin',this.fromJin)
				this.$store.commit('updataShareId', this.share_id)
				console.log('来自分享页面', options)
			}
			//#ifdef MP-WEIXIN
			let self = this
			uni.login({
				provider: 'weixin',
				success: function(res) {
					self.loginCode = res.code
				},
			})
			//#endif

		},
		onShow() {
			this.getTempId()
			this.getInfo()
		},
		onUnload() {
			if (this.timeId) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		onHide() {
			if (this.timeId) {
				clearInterval(this.timeId)
				this.timeId = null
			}
		},
		methods:{
			//#ifdef H5			
			isLogin(){
				let self = this
				if (self.$store.getters.getToken) {
					self.token = self.$store.getters.getToken
					self.userId = self.$store.getters.getUserId
					console.log('有token')
				} else {
					console.log('没有token')
					userLogin(self.share_id,self.fromJin)
					self.token = self.$store.getters.getToken
					self.userId = self.$store.getters.getUserId
					self.getInfo()
				}
			},
			//#endif			
			//#ifdef MP-WEIXIN
			isLogin(){
				let self = this
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userInfo']) {
							if (self.$store.getters.getToken) {
								self.token = self.$store.getters.getToken
								self.userId = self.$store.getters.getUserId
								console.log('有token')
							} else {
								console.log('没有token')
								userLogin(self.share_id,self.fromJin)
								setTimeout(()=> {
									self.token = self.$store.getters.getToken
									self.userId = self.$store.getters.getUserId
									self.getInfo()
								},2000)
							}
						}
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			//#endif
			subNews(data) {
				let self = this
				uni.requestSubscribeMessage({
					tmplIds: self.needTemp,
					success(res) {
						let arr = []
						for(var p in res){
						  if(res[p] == 'accept') {
							  arr.push(p)
						  }
						}
						self.templateIds = arr
						console.log('授权了的模板id有',arr)
						self.tellManageTmpIds()
					},
					fail(err) {
						console.log('订阅消息fail', err)
					}
				})
			},
			// 获取需要授权的模板id
			getTempId() {
				let self = this
				let data = {
					token: self.$store.getters.getToken,
					type: 3
				}
				self.$api.get_wx_news(data).then(res=>{
					if (res.status) {
						if(res.data.length>0) {
							self.needTemp=res.data
						}else {
							self.needTemp = []
						}
						console.log('订阅消息数据模板id', res)
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(err=>{
					console.log('订阅消息数据模板id', err)
				})
			},
			// 告知后台订阅的模板id有哪些
			tellManageTmpIds() {
				let self = this
				let temp = self.templateIds.join(',')
				let data = {
					token: self.$store.getters.getToken,
					templateIds: temp,
					isNoNeedLoading: true
				}
				self.$api.get_wx_news_result(data).then(res => {
					if(res.status) {
						
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('小程序授权模板告知',res)
				}).catch(err => {
					console.log('小程序授权模板告知',err)
				})
			},
			joinAct() {
				let self = this
				let data = {
					token: self.token,
					id: self.id
				}
				self.$api.join_privi_act(data).then(res => {
					if(res.status) {
						let item = JSON.stringify(res.data)
						if(self.needTemp.length>0) {
							//#ifdef H5
							uni.navigateTo({
								url: '../privilegeOrder/privilegeOrder?id='+self.id+'&item='+item+'&share_id='+self.share_id+'&is_address='+self.info.is_address
							})
							//#endif
							//#ifdef MP-WEIXIN
							uni.showModal({
								content: '成功参与！是否订阅相关消息通知？',
								confirmColor: '#00A66A',
								success: function (res) {
								    if (res.confirm) {
										self.subNews()
										setTimeout(()=> {
											uni.navigateTo({
												url: '../privilegeOrder/privilegeOrder?id='+self.id+'&item='+item+'&share_id='+self.share_id+'&is_address='+self.info.is_address
											})
										},1500)
								    } else if (res.cancel) {
										uni.navigateTo({
											url: '../privilegeOrder/privilegeOrder?id='+self.id+'&item='+item+'&share_id='+self.share_id+'&is_address='+self.info.is_address
										})
								    }
								}
							})
							//#endif
							
						}else {
							uni.navigateTo({
								url: '../privilegeOrder/privilegeOrder?id='+self.id+'&item='+item+'&share_id='+self.share_id
							})
						}
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
					console.log('自己参加活动',res)
				}).catch(err => {
					console.log('自己参加活动',err)
				})
			},
			// 获取特权活动详情数据
			getInfo() {
				let data = {
					id: this.id,
					token: this.token
				}
				this.$api.getSpeacilActDeltail(data).then(res => {
					console.log('获取特权活动详情数据',res)
					if(res.status) {
						this.info = res.data
						this.info.session_from='{"type":"privileged_activity","info_id":'+this.info.id+'}'
						this.is_phone = this.info.is_phone
						this.timel()
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack({
							})
						},500)
					}
				}).catch(err => {
					console.log('获取特权活动详情数据',err)
				})
			},
			timel() {
				let that = this;
				//每1秒钟更新一次计数
				that.timeId = setInterval(function() {
					var now = new Date().getTime();
					var distance = that.info.end_time*1000 - now;
					if (distance <= 0) {
						that.isTimeEnd = true;
						if (that.timeId) {
							clearInterval(that.timeId);
							that.timeId = null
						}
						return false
					}
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
					that.days = days>=10?days:'0'+days;
					that.hours = hours>=10?hours:'0'+hours;
					that.minutes = minutes>=10?minutes:'0'+minutes;
					that.seconds = seconds>=10?seconds:'0'+seconds;
				}, 1000);
			},
			toSharePoster(){
				if(this.token) {
					uni.navigateTo({
						url:'../sharePoster/sharePoster?id='+this.id
					})
				}else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
			},
			toService() {
				if(this.token) {
					uni.navigateTo({
						url:'../../service/service'
					})
				}else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					})
				}
			},
			getphonenumber:function(e) {
				let self = this
				uni.checkSession({
					success: function(res) {
						
					},
					fail: function(err) {
						uni.login({
							provider: 'weixin',
							success: function(res) {
								self.loginCode = res.code
							},
						})
					}
				})
				// 问用户是否授权手机号码
				if(e.detail.errMsg=='getPhoneNumber:fail user deny'||e.detail.iv==undefined||e.detail.encryptedData==undefined) {
					uni.showModal({
						content: '拒绝授权后将无法参与活动',
						confirmColor: '#00A66A',
						success: function (res) {
						    if (res.confirm) {
						        console.log('用户点击确定');
						    } else if (res.cancel) {
								uni.showToast({
									title: '请点击自己参加进行授权',
									icon: 'none',
									duration: 2000
								})
						    }
						}
					})
				}else {
					let data = {
						token: self.token,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
						code: self.loginCode
					}
					self.$api.add_phone(data).then(res => {
						if(res.status) {
							self.phone = res.data.phoneNumber
							self.$store.commit('updataPhone',res.data.phoneNumber)
							self.joinAct()
						}
					}).catch(err => {
						console.log('添加手机号码',err)
					})
				}
			},
			toBuySuccess() {
				uni.navigateTo({
					url:'../buySucceed/buySucceed?id='+this.id
				})
			}
		}
	}
</script>

<style>
	.marginBo{
		margin-bottom: 40upx!important;
	}
	.rich_text_module{
		padding: 22upx 0;
		background: #fff;
	}
	.space_bgc {
		width: 100%;
		height: 30upx;
		background: #F5F6F9;
	}
	.other_img {
		margin-bottom: 32upx;
	}
	body,view{
		margin: 0;
		padding: 0;
	}
	page{
		position: absolute;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.welfare-details{
		width: 100%;
		background: #F5F6F9;
		padding-bottom: 314upx;
	}
	.welfare-details-price{
		width: 100%;
		background: #fff;
	}
	.detatil_bottom {
		padding: 20upx 30upx 30upx 30upx;
	}
	.share-gain{
		width: 162upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		position: absolute;
		right: 0;top: 30upx;
		border-radius: 23upx 0 0 23upx;
		background: linear-gradient(to left,#FF4040,#FF793E);
		color: #fff;
		font-size: 24upx;
	}
	.price-count-down{
		display: flex;
		width: 100%;
		height: 100upx;
		color: #fff;
	}
	.current-price{
		width: 482upx;
		height: 100%;
		padding-left: 30upx;
		box-sizing: border-box;
		background: linear-gradient(to right,#FF7719,#FF4034);
	}
	.current-price>text:last-child{
		display: inline-block;
		margin-left: 10upx;
		text-decoration: line-through;
		font-size: 28upx;
	}
	.time-limit{
		width: 270upx;
		height: 100upx;
		background: #FDE3E3;
		font-size: 24upx;
		text-align: center;
		padding-top: 8upx;
		padding-bottom: 12upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.time-limit>view:last-child{
		color: #FF5C46;
		font-size: 20upx;
		line-height: 38upx;
		margin-top: 10upx;
	}
	.time-limit>view:last-child>text{
		display: inline-block;
		width: 38upx;
		height: 38upx;
		background: #FD3721;
		font-size: 24upx;
		line-height: 38upx;
		color: #fff;
		padding: 0 4upx;
		box-sizing: border-box;
		border-radius: 	4upx;
		margin: 0 4upx;
	}
	.welfare-details-price .child3{
		display: inline-block;
		color: #333333;
		font-size: 34upx;
		line-height: 48upx;
	}
	.welfare-details-price .child4{
		margin-top: 20upx;
	}
	.share-achievement{
		color: #FF3C00;
		font-size: 24upx;
		line-height: 45upx;
		vertical-align: text-bottom;
	}
	.share-achievement>view{
		width: 176upx;
		height: 46upx;
		border: 0.5px solid #FF3C00;
		border-radius: 23upx;
		text-align: center;
	}
	.share-achievement>view:first-child{
		margin-right: 10upx;
	}
	.join-num{
		margin-right: 30upx;
		color: #999;
		font-size: 24upx;
		line-height: 46upx;
		vertical-align: text-bottom;
	}
	.join-condition{
		width: 100%;
		height: 176upx;
		margin-top: 20upx;
		background: #fff;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.join-condition>view{
		padding: 22upx 0;
		box-sizing: border-box;
	}
	.join-condition>view:first-child{
		border-bottom: 0.5px solid #DEDEDE;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
	}
	.join-condition>view:last-child{
		font-size: 24upx;
		color: #666666;
		line-height: 40upx;
	}
	.privilege-details{
		width: 100%;
		background: #fff;
		margin-top: 20upx;
		box-sizing: border-box;
		padding-bottom: 1upx;
	}
	.privilege-details>view:first-child{
		padding: 24upx 0upx;
		padding-left: 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		border-bottom: 0.5px solid #DEDEDE;
	}
	.service-share{
		width: 100%;
		height: 314upx;
		background: #fff;
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;
		box-shadow: 0 -6upx 22upx 0 rgba(109, 107, 107, 0.27);
		position: fixed;
		bottom: 0;
		z-index: 100;
	}
	.service-share>view:first-child{
		border-bottom: 0.5px solid #DEDEDE;
		text-align: center;
		color: #333333;
		font-size: 26upx;
		padding: 20upx 0;
		box-sizing: border-box;
	}
	.service-share>view:last-child{
		padding: 20upx 0;
		padding-left: 48upx;
		padding-right: 30upx;
		box-sizing: border-box;
		border-bottom: 0.5px solid #DEDEDE;
		justify-content: space-between;
	}
	.service{
		color: #666;
		font-size: 22upx;
		margin-top: 14upx;
	}
	.service>text{
		display: block;
		width: 64upx;
		text-align: center;
		line-height: 32upx;
	}
	.service-share-gain{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.service-share-gain>view{
		height: 80upx;
		border: 2upx solid #00A66A;
		font-size: 32upx;
		text-align: center;
		line-height: 76upx;
		color: #00A66A;
		margin-bottom: 10upx;
		border-radius: 40upx;
		padding: 0upx 48upx;
		box-sizing: border-box;
		font-weight: 600;
	}
	.attend-self{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.service-share-gain>text,.attend-self>text{
		width: 100%;
		color: #999;
		font-size: 22upx;
		line-height: 34upx;
		text-align: center;
	}
	.attend-self>view,.attend-self>button{
		padding: 0upx 48upx;
		box-sizing: border-box;
		height: 80upx;
		background: linear-gradient(#B3EA00,#00A66A);
		box-shadow: 0 4upx 8upx 0 rgba(0, 166, 106, 0.35);
		text-align: center;
		line-height: 80upx;
		color: #fff;
		margin-bottom: 10upx;
		border-radius: 40upx;
	}
</style>
